<template>

  <!-- <div>
    <h3>{{user.name}}</h3>
    
    <ul>发布的帖子
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/posts/'+post.id">{{post.title}}</router-link>
        <a href="javascript:;" @click="deletePost(post.id)">x</a>
      </li>
    </ul>
  </div>  -->
  <table class="table container" id="table">
    <thead>
      <tr>
        <th>
          <div class=" col-sm-8 col-xs-6">发布的所有帖子</div>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="post in posts" :key="post.id">
        <td>
          <div class="col-sm-8 col-xs-8">
            <router-link :to="'/posts/'+post.id">{{post.title}}</router-link>
          </div>

          <div class="col-sm-1 col-xs-1">
            <a href="javascript:;" @click="deletePost(post.id)">x</a>
          </div>         
          
        </td>
        
      </tr>
    </tbody>

  </table>

</template>

<script>
export default {
  data(){
      return{
        user:"",
        posts:"",
      }
    },
    methods:{
      async deletePost(postId){
        try{
          // console.log(postId)
          await this.$http.get("/api/deletePost/" + postId)  
          alert("成功删帖")
          let response = await this.$http.get("/api/users/"+this.$route.params.userId)
          this.user = response.data.user
          this.posts = response.data.posts
        }catch(e){
          alert("没有权限")
        }
      },
      
    },
    async created(){
      let res = await this.$http.get("/api/users/"+this.$route.params.userId)
      this.user = res.data.user
      this.posts = res.data.posts
    }
    
}
</script>

<style scoped>
table{
  width: 98%;
}
a{
  color: black;
}
td:last-of-type{
  border-bottom: 1px solid #ddd;
}

#table td,#table th{
  vertical-align: middle;
}

@media (min-width: 1200px){
  table{
    width: 90%;
  }
}

</style>

